<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - OA流程审批系统</title>
    <link href="../css/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f5f6fa;
        }
        .quick-entry {
            transition: all 0.3s ease;
        }
        .quick-entry:hover {
            transform: translateY(-2px);
        }
    </style>
</head>
<body class="p-4">
    <!-- 顶部状态栏 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="text-lg font-semibold">张三</h2>
                <p class="text-gray-500 text-sm">研发部 - 高级工程师</p>
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-500">2024年3月21日</p>
                <p class="text-sm text-gray-500">星期四</p>
            </div>
        </div>
    </div>

    <!-- 待办事项 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
        <h3 class="text-lg font-semibold mb-3">待办事项</h3>
        <div class="space-y-3">
            <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-file-alt text-blue-500 mr-3"></i>
                    <div>
                        <p class="font-medium">请假审批</p>
                        <p class="text-sm text-gray-500">李四 - 事假申请</p>
                    </div>
                </div>
                <span class="text-sm text-blue-500">待审批</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-receipt text-green-500 mr-3"></i>
                    <div>
                        <p class="font-medium">费用报销</p>
                        <p class="text-sm text-gray-500">王五 - 差旅费报销</p>
                    </div>
                </div>
                <span class="text-sm text-green-500">已通过</span>
            </div>
        </div>
    </div>

    <!-- 快捷入口 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
        <h3 class="text-lg font-semibold mb-3">快捷入口</h3>
        <div class="grid grid-cols-4 gap-4">
            <div class="quick-entry text-center">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-clock text-blue-500"></i>
                </div>
                <p class="text-sm">打卡</p>
            </div>
            <div class="quick-entry text-center">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-calendar-alt text-green-500"></i>
                </div>
                <p class="text-sm">请假</p>
            </div>
            <div class="quick-entry text-center">
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-plane text-purple-500"></i>
                </div>
                <p class="text-sm">出差</p>
            </div>
            <div class="quick-entry text-center">
                <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-receipt text-yellow-500"></i>
                </div>
                <p class="text-sm">报销</p>
            </div>
            <div class="quick-entry text-center">
                <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-shopping-cart text-red-500"></i>
                </div>
                <p class="text-sm">采购</p>
            </div>
            <div class="quick-entry text-center">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-stamp text-indigo-500"></i>
                </div>
                <p class="text-sm">用章</p>
            </div>
            <div class="quick-entry text-center">
                <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-car text-pink-500"></i>
                </div>
                <p class="text-sm">用车</p>
            </div>
            <div class="quick-entry text-center">
                <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-money-bill-wave text-gray-500"></i>
                </div>
                <p class="text-sm">付款</p>
            </div>
        </div>
    </div>

    <!-- 我的申请 -->
    <div class="bg-white rounded-lg shadow-sm p-4">
        <h3 class="text-lg font-semibold mb-3">我的申请</h3>
        <div class="space-y-3">
            <div class="flex items-center justify-between p-3 border-b">
                <div class="flex items-center">
                    <i class="fas fa-calendar-alt text-blue-500 mr-3"></i>
                    <div>
                        <p class="font-medium">事假申请</p>
                        <p class="text-sm text-gray-500">2024-03-20 至 2024-03-21</p>
                    </div>
                </div>
                <span class="text-sm text-green-500">已通过</span>
            </div>
            <div class="flex items-center justify-between p-3 border-b">
                <div class="flex items-center">
                    <i class="fas fa-receipt text-green-500 mr-3"></i>
                    <div>
                        <p class="font-medium">差旅费报销</p>
                        <p class="text-sm text-gray-500">2024-03-15</p>
                    </div>
                </div>
                <span class="text-sm text-yellow-500">审批中</span>
            </div>
        </div>
    </div>
</body>
</html> 